<template>
  <div class="categroy">
    <van-search
      @focus="$router.push('/search')"
      background="#fff"
      shape="round"
      placeholder="输入商品信息"
    ></van-search>
    
    <van-tabs scrollspy class="cate">
      <van-tab  class="content" v-for="i in cateList" :key="i.id" :title="i.cate_name">
        <h3>{{i.cate_name}}</h3>
  
        <ul>
          <router-link tag="li" :to="{
            path:`/goodList`,
            query:{id:child.id, title:child.cate_name,}
          }" v-for="child in i.children" :key="child.id">
            <van-image :src="child.pic"/>
            <span>{{child.cate_name}}</span>
          </router-link>
        </ul>
    
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  name:"Category",
  data(){
    return {
        cateList:[]
    }
  },
  created(){
    this.$axios.get('api/category').then(res=>{
      this.cateList=res.data.data;
    })
  }
}
</script>

<style lang="less">
.categroy{
    padding-bottom: 60px;
.cate{
  .van-tabs__wrap{
      height:auto;
      position: fixed;
      left:0px;
      z-index:999;
      width:120px;
  }
  .van-tabs__nav{
    display: block;
    padding-left:0px;
    .van-tab{
      line-height: 50px;
      font-size:16px;
    }
    .van-tab--active{
      border-left:2px solid #fc4141;
      color:#fc4141;
      background-color:cornsilk;
    }
    .van-tabs__line{
      display: none;
    }
  }
  .van-tabs__content{
    padding-left:120px;
    .content{
        line-height: 20px;
        h3{
          text-align: center;
        }
        ul{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li{
            width:33%;
            text-align: center;
          }
        }
    }   
  }

}
}
</style>